<template>
  <div class="im-index-container">
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" v-if="testBuild">
        <el-tab-pane label="会话" name="conversation"></el-tab-pane>
        <el-tab-pane label="历史会话" name="history-conversation"></el-tab-pane>
        <el-tab-pane label="知识库" name="knowledgelabel"></el-tab-pane>
        <el-tab-pane label="工具库" name="toollibrary"></el-tab-pane>
        <el-tab-pane label="服务统计" name="serve-statistics"></el-tab-pane>
      </el-tabs>
      <div class="tab-container">
        <keep-alive include="conversation">
          <router-view></router-view>
        </keep-alive>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { timeLong } from "@/utils/common";
export default {
  name: "im-index",
  data() {
    return {
      activeName: "/conversation",
      timekeeperId: null,
      userName: "",
      testBuild:''
    };
  },
  computed: {
    ...mapState(["idStore"]),
  },
  watch: {
    "idStore.waiterId": {
      handler() {
        this.timekeeper();
      },
    },
  },
  created() {
    this.testBuild = process.env.VUE_NODE_ENV === 'test' ? true : false
    let ifrs = window.parent.document.getElementsByTagName("iframe");
    for (let i = 0, j = ifrs.length; i < j; i++)
      if (ifrs[i].contentWindow == window) {
        console.log("src", ifrs[i].src);
        this.userName = ifrs[i].src.replace(/.*loginName=/,'')
        window.localStorage.setItem('waiterName', this.userName);
        const index1 = ifrs[i].src.lastIndexOf("/");
        const index12 = ifrs[i].src.indexOf("?");
        this.activeName = ifrs[i].src.slice(index1, index12);
        console.log("activeName", this.activeName);
        break;
      }
    this.handleClick();
  },
  mounted() {
    if (this.activeName != "/conversation") { //conversation页单独走自己的逻辑
      this.$nextTick(() => {
        this.setIdStore({
          waiterId: this.userName,
          waiterName: this.userName,
          waiterType: 1,
        });
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timekeeperId);
  },
  methods: {
    ...mapMutations(["setServiceTime", "setIdStore"]),
    handleClick() {
      const activeName = this.activeName.includes('/') ? this.activeName : `/${this.activeName}`
      const goUrl = `/im-index${activeName}`;
      if (this.$route.fullPath == goUrl) {
        return;
      }
      this.$router.push(`/im-index${activeName}`);
    },
    timekeeper() {
      this.timekeeperId && clearInterval(this.timekeeperId);
      let showTime = "0分钟";
      this.setServiceTime(showTime);
      const start = new Date().getTime();
      this.timekeeperId = setInterval(() => {
        let end = new Date().getTime();
        showTime = timeLong(start, end);
        this.setServiceTime(showTime);
      }, 6000);
    },
  },
};
</script>

<style lang="scss" scoped>
// .im-index-container {
//   padding: 15px;
//   background: #f2f2f2;
// }
.tab-container {
  padding: 10px;
  background: #ffff;
  min-height: 700px;
}
</style>